* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}


.top-nav-left {
    width: 100%;
    height: 40px;
    /* border: 1px solid red; */
    background-color: #ffffff;
}

.top-nav-left a {
    text-decoration: none;
    font-size: 16px;
    color: #3c3c3c;
    position: relative;
    top: 10px;
    left: 16px;
    padding: 0 5px;
}

.message-bel1 img {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-left: 260px;
}

.bell img {
    width: 26px;
    height: 26px;
    position: absolute;
    margin-top: -36px;
    margin-left: 320px;
}

.circle-container {
    width: 360px;
    height: 180px;
    /* border: 1px solid red; */
    background-color: #ffffff;
    margin-top: -4px;
}

.top-circie-all div {
    margin-left: 18px;
    position: relative;
    top: 15px;
}

.join-num div {
    margin-left: 210px;
    margin-top: -32px;
}

.animation-user {
    width: 18px;
    height: 18px;
    border: 1px solid #ffd361;
    border-radius: 100%;
    margin-top: -25px;
    margin-left: 330px;
    background-image: url("./images/551718f23b646d0b561e076e0d897ec2.jpg");
    background-size: 100% 100%;
}

.circle-wrap {
    width: 56px;
    height: 56px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-left: 22px;
    margin-top: 20px;
    background-image: url("./images/3137f0bbbc2736b17861e6765a88d120.jpg");
    background-size: 100% 100%;
}

.circle-name div {
    margin-left: 18px;
    font-size: 12px;
    margin-top: 10px;
}

.circle {
    width: 56px;
    height: 56px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-left: 22px;
    margin-top: 20px;
    background-image: url("./images/44d8352ca38ecb5e554df3a7a153fa22.jpg");
    background-size: 100% 100%;
}

.app {
    width: 56px;
    height: 56px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-left: 22px;
    margin-top: 20px;
    background-image: url("./images/7a5d114c52b59b6054e63fb63d43ceaa.jpg");
    background-size: 100% 100%;
}

.liu {
    width: 56px;
    height: 56px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-left: 22px;
    margin-top: 20px;
    background-image: url("./images/fd7ffb7809b7a3e62640edecb2216e75.jpg");
    background-size: 100% 100%;
}

.nav-container {
    width: 336px;
    height: 100px;
    /* border: 1px solid red; */
    margin-left: 10px;
    display: flex;
    margin-top: 10px;
}

.nav-unit-wrap {
    width: 78px;
    height: 78px;
    /* border: 1px solid red; */
    background-image: url("./images/9789c223e17334a461fe8414bf2036c8.png");
    background-size: 100% 100%;
    display: flex;
    float: left;
    margin: 0 5px;
}

.daluo {
    width: 78px;
    height: 78px;
    /* border: 1px solid red; */
    background-image: url("./images/2cc6f8f92801c4f5e48586fb588c971d.png");
    background-size: 100% 100%;
    display: flex;
    float: left;
    margin: 0 3px;
}

.zuo {
    width: 78px;
    height: 78px;
    /* border: 1px solid red; */
    background-image: url("./images/ecdd867e2109ab7c91e42065d48c501c.png");
    background-size: 100% 100%;
    display: flex;
    float: left;
    margin: 0 3px;
}

.leng {
    width: 78px;
    height: 78px;
    /* border: 1px solid red; */
    background-image: url("./images/42f4b89111886bf8f19c693b5f490d4e.png");
    background-size: 100% 100%;
    display: flex;
    float: left;
    margin: 0 3px;
}

.wterfall-wrap {
    width: 336px;
    height: 5500px;
    /* border: 1px solid red; */
    margin-left: 10px;
}

.item-block {
    width: 164px;
    height: 276px;
    /* border: 1px solid red; */
    background-color: #ffffff;
}

.feng {
    width: 164px;
    height: 164px;
    /* border: 1px solid red; */
    background-image: url("./images/34ec9f67f3897b59aa8966d3ec2225bc.jpg");
    background-size: 100% 100%;
}

.item-block img {
    width: 18px;
    height: 18px;
    margin-left: 12px;
    margin-top: 10px;
}

.item-block span {
    color: rgba(0, 0, 0, .5);
    font-size: 11px;
    display: block;
    margin-top: -17px;
    margin-left: 40px;
}

.zuozm {
    font-size: 14px;
    margin-left: 15px;
    margin-top: 10px;
}

.left-type {
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/56251ce019f763624b7bea2c06f41436.jpg");
    background-size: 100% 100%;
}

.wom {
    color: rgba(0, 0, 0, .5);
    font-size: 11px;
    margin-left: 37px;
    margin-top: -20px;
}

.partice-user img{
    width: 12px;
    height: 9px;
    margin-left: 110px;
    margin-top: -10px;
    display: block;
}

.partice-user span{
    color: rgba(0, 0, 0, .5);
    font-size: 11px;
    margin-left: 127px;
    margin-top: -12px;
}

.cui {
    width: 164px;
    height: 164px;
    /* border: 1px solid red; */
    background-image: url("./images/4347bb1846d077eaeab9057f6a7859db.jpg");
    background-size: 100% 100%;
}

.type {
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/44d8352ca38ecb5e554df3a7a153fa22.jpg");
    background-size: 100% 100%;
}

.fui {
    width: 164px;
    height: 164px;
    /* border: 1px solid red; */
    background-image: url("./images/9ae4fbf44f51cdb8ac57705e2626e2ca.jpg");
    background-size: 100% 100%;
}

.yao{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/bb961ddca4b5bd6ec1887f470a55e757.jpg");
    background-size: 100% 100%;
}

.mang{
    width: 164px;
    height: 164px;
    background-image: url("./images/92c4de0b2bc9f1debe2f00f641c986a4.jpg");
    background-size: 100% 100%;
}

.yang{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/5dcee028d3861bf0b33392966951cb69.jpg");
    background-size: 100% 100%;
}

.hui {
    width: 164px;
    height: 164px;
    /* border: 1px solid red; */
    background-image: url("./images/f88d33fceea45386856e729597a2ba73.png");
    background-size: 100% 100%;
}

.pang{
        width: 23px;
        height: 23px;
        border: 1px solid #ffffff;
        border-radius: 100%;
        margin-top: 7px;
        margin-left: 10px;
        background-image: url("./images/d09ab221-85ef-4ce7-a5d8-d7ef5d6539e8.jpg");
        background-size: 100% 100%;
    
}

.hao{
    width: 164px;
    height: 164px;
    background-image: url("./images/cf69a2e3500f9b4e1908e4514487edad.jpg");
    background-size: 100% 100%;
}

.nan{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/q9Ho7iepcrgIso.jpg");
    background-size: 100% 100%;
}

.shun{
    width: 164px;
    height: 164px;
    background-image: url("./images/3ef1c61dbf8cdd571a3263d4eb609c3e.jpg");
    background-size: 100% 100%;
}

.cheng{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/bb961ddca4b5bd6ec1887f470a55e757.jpg");
    background-size: 100% 100%;
}

.guo{
    width: 164px;
    height: 164px;
    background-image: url("./images/bf534dcacf8ad4dd8a61b73a319a2596.jpg");
    background-size: 100% 100%;
}

.rong{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/6958b10c128df5a8dee6b65d48c9e3d4.jpg");
    background-size: 100% 100%;
}

.zhang{
    width: 164px;
    height: 164px;
    background-image: url("./images/f92dee2cc4654feeab19d456352531e3.png");
    background-size: 100% 100%;
}

.wen{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/eOFtr7sP5f7NcM.jpg");
    background-size: 100% 100%;
}

.jie{
    width: 164px;
    height: 164px;
    background-image: url("./images/8277909f057956d72a3f6f9d4b97e2fd.jpg");
    background-size: 100% 100%;
}

.jing{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/ba4a74a4f750ab8ecec7623d8360ac1d.jpg");
    background-size: 100% 100%;
}

.jiang{
    width: 164px;
    height: 164px;
    background-image: url("./images/b20c840898dbe0fdbb23e71f92f262de.png");
    background-size: 100% 100%;
}

.zi{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/18f6bd89-5a2f-4088-b528-6eb0ccd621cb.jpg");
    background-size: 100% 100%;
}

.zhuan{
    width: 164px;
    height: 164px;
    background-image: url("./images/bb41d44cd72c017b265329aab8c77fc3.jpg");
    background-size: 100% 100%;
}

.xuan{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/VouGBLEjiOSUkU.png");
    background-size: 100% 100%;
}

.wang{
    width: 164px;
    height: 164px;
    background-image: url("./images/1196697b4952691694eb067c721f161d.jpg");
    background-size: 100% 100%;
}

.yu{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/5dcee028d3861bf0b33392966951cb69.jpg");
    background-size: 100% 100%;
}

.fan{
    width: 164px;
    height: 164px;
    background-image: url("./images/99cf98ff573ff285b68c481fac62fb58.jpg");
    background-size: 100% 100%;
}

.wu{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/ba4a74a4f750ab8ecec7623d8360ac1d.jpg");
    background-size: 100% 100%;
}

.qian{
    width: 164px;
    height: 164px;
    background-image: url("./images/a5e59a8d07180d50b7720fc7a83732d3.jpg");
    background-size: 100% 100%;
}

.jia{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/6s39mM8f2BgnkV.jpg");
    background-size: 100% 100%;
}

.yi{
    width: 164px;
    height: 164px;
    background-image: url("./images/0409d7c0b4b5cbe40a573c118676e3dd.jpg");
    background-size: 100% 100%;
}

.qiang{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/fa4e3e83b5ec168de7c705eacc0ac9ea.jpg");
    background-size: 100% 100%;
}

.ma{
    width: 164px;
    height: 164px;
    background-image: url("./images/65630ebf35dc6f0b288311446dc93c43.jpg");
    background-size: 100% 100%;
}

.xiu{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/1b629c3d39987021996c116801596f24.jpg");
    background-size: 100% 100%;
}

.dong{
    width: 164px;
    height: 164px;
    background-image: url("./images/3acbdee3e4175ff1c3809ea637357915.jpg");
    background-size: 100% 100%;
}

.yuan{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/fa4e3e83b5ec168de7c705eacc0ac9ea.jpg");
    background-size: 100% 100%;
}

.zu{
    width: 164px;
    height: 164px;
    background-image: url("./images/72c17a12faf8212127b3d723050707c5.jpg");
    background-size: 100% 100%;
}

.meng{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/fa4e3e83b5ec168de7c705eacc0ac9ea.jpg");
    background-size: 100% 100%;
}

.fei{
    width: 164px;
    height: 164px;
    background-image: url("./images/faef1e815fbd054e3d408ec8eb559a86.png");
    background-size: 100% 100%;
}

.han{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/kU3tVeKNH3rO1M.jpg");
    background-size: 100% 100%;
}

.tian{
    width: 164px;
    height: 164px;
    background-image: url("./images/3facb13e2c8ceecc290c40d1c6323e29.jpg");
    background-size: 100% 100%;
}

.jun{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/d16677481e109aebe6542eba00d14db2.png");
    background-size: 100% 100%;
}

.zhao{
    width: 164px;
    height: 164px;
    background-image: url("./images/9de4ae9df17528b396bc90dd65282f3f.jpg");
    background-size: 100% 100%;
}

.yin{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/6PGXmVqw1LWSzk.jpg");
    background-size: 100% 100%;
}

.wei{
    width: 164px;
    height: 164px;
    background-image: url("./images/6a46b551c0c890707195287d19e33a75.jpg");
    background-size: 100% 100%;
}

.xu{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/b6e7ae8f73b1af4e108fd6226cc2c5ad.jpg");
    background-size: 100% 100%;
}

.lin{
    width: 164px;
    height: 164px;
    background-image: url("./images/64d7a430574a211d3fa9a4209641d43b.jpg");
    background-size: 100% 100%;
}

.zheng{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/b6e7ae8f73b1af4e108fd6226cc2c5ad.jpg");
    background-size: 100% 100%;
}

.container-size{
    width: 164px;
    height: 164px;
    background-image: url("./images/20dbeefca4d626607aea378f946575dc.jpg");
    background-size: 100% 100%;
}

.recommend-relative{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/00d5ba41ba09f80e6160dc10c740c2fd.jpg");
    background-size: 100% 100%;
}

.du{
    width: 164px;
    height: 164px;
    background-image: url("./images/e6d0a42b149aee09ffd94d436222a6c9.png");
    background-size: 100% 100%;
}

.gu{
    width: 23px;
    height: 23px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    margin-top: 7px;
    margin-left: 10px;
    background-image: url("./images/A4jNkQkugIu2sG.jpg");
    background-size: 100% 100%;
}